<template>
	<view>
		<!-- 搜索框 -->
		<view class="search-box">
			<view class="search">
				<view class="s-l">
					<u-icon name='search' size="28"/>
					<text>搜索聊天记录、联系人</text>
				</view>
				<view class="s-r" @click="goAddressList">
					<u-icon name='account' size="28"/>
					<text>通讯录</text>
				</view>
			</view>
		</view>
		<!-- 聊天列表 -->
		<view class="chat-list" v-for="(item, index) in chatGroup" :key="index" @click="goChat(index, item.name)">
			<!-- 头像 -->
			<view class="portrait">
				<block v-for="(pic, idx) in item.faces" :key="idx">
					<!-- 图片大小根据当前需要展示多少图片,来确定每一个图片所需占的份数 -->
					<image :src="pic" :class="'face_'+item.faces.length"></image>
				</block>
				<view class="msgNum" v-if="item.msgNum">{{item.msgNum}}</view>
			</view>
			<!-- 信息栏 -->
			<view class="info">
				<view class="title">
					<text>{{item.name}}</text>
					<text>{{item.date}}</text>
				</view>
				<view class="txt">
					<view>
						<text v-if="item.lastSender">{{item.lastSender}}: </text> {{item.lastMsg}}
					</view>
					<u-icon v-if="item.bellRing" name="mic-off" color="#aaa" size="28" @tap.native.stop="changeBelling(index)"/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import chatGroup from '../../common/chatGroup.js'
	import thro from '../../utils/thro.js'
	export default {
		data() {
			return {
				chatGroup
			}
		},
		// 加载
		onLoad () {
			console.log('页面加载')
			if (!!uni.getStorageSync('chatGroup')) {
				this.chatGroup = JSON.parse(uni.getStorageSync('chatGroup'))
			}
		},
		// 显示
		onShow () {
			console.log('页面显示')
			if (!!uni.getStorageSync('chatGroup')) {
				this.chatGroup = JSON.parse(uni.getStorageSync('chatGroup'))
			}
		},
		methods: {
			// 跳转到聊天室
			goChat: thro(function(index, name){
				// 点开聊天记录后,未读数量应该清零
				this.chatGroup[index].msgNum = 0;
				// 跳转到聊天室
				uni.navigateTo({
				    url: '../../components/chatContent/chatContent?name=' + name
				});
				// 将修改的数据存储到本地
				uni.setStorageSync('chatGroup', JSON.stringify(this.chatGroup))
			}),
			// 静音取消
			changeBelling (index){
				this.chatGroup[index].bellRing = false;
				uni.setStorageSync('chatGroup', JSON.stringify(this.chatGroup))
			},
			// 跳转到通讯录
			goAddressList () {
				uni.switchTab({
				    url: '../list/list'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 搜索框
	.search-box {
		height: 100rpx;
		width: 100%;
		background-color: #f6f6f6;
		display: flex;
		justify-content: center;
		align-items: center;
		.search{
			width: 630rpx;
			height: 60rpx;
			background-color: #fff;
			border-radius: 30rpx;
			line-height: 60rpx;
			display: flex;
			justify-content: space-between;
			padding: 0 20rpx;
			text{
				margin-left: 10rpx;
				font-size: 24rpx;
			}
		}
	}
	// 聊天列表
	.chat-list{
		height: 150rpx;
		width: 94%;
		margin-left: 3%;
		display: flex;
		align-items: center;
		.portrait {
			width: 96rpx;
			height: 96rpx;
			position: relative;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			.msgNum{
				width: 35rpx;
				height: 35rpx;
				border-radius: 50%;
				font-size: 24rpx;
				background-color: red;
				line-height: 30rpx;
				text-align: center;
				position: absolute;
				right: -15rpx;
				top: -15rpx;
				color: #fff;
			}
			image{
				width: 88rpx;
				height: 90rpx;
			}
			.face_1{
				width: 88rpx;
				height: 90rpx;
			}
			.face_4 {
				width: 42rpx;
				height: 42rpx;
			}
			.face_9 {
				width: 26rpx;
				height: 26rpx;
			}
		}
		.info{
			flex: 1;
			width: 96rpx;
			height: 96rpx;
			margin-left: 15rpx;
			color: #9999b3;
			font-size: 24rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			.title{
				display: flex;
				justify-content: space-between;
				text:nth-child(1){
					font-weight: 500;
					font-size: 30rpx;
					color: #303133;
				}
			}
			.txt{
				display: flex;
				justify-content: space-between;
			}
		}
	}
</style>
